import Navbar from '../../compoents/Navbar'
import { useNavigate, useLocation } from 'react-router-dom'
import { Button } from 'antd-mobile'
import { CheckCircleFill } from 'antd-mobile-icons'
import style from './index.module.css'

function Index() {
  const navigate = useNavigate()
  const { state } = useLocation()
  const userInfo = state?.userInfo || {}
  console.log('userInfo',userInfo,state);
  
  const handleViewOrder = () => {
    console.log("查看订单");
    // 跳转到申请记录页面
    navigate('/JiLu',{state:{userInfo}});
  }

  return (
    <div className={style.container}>
      <Navbar showBack onBack={() => navigate(-1)} title="申请信息填写" />
      
      <div className={style.content}>
        {/* 进度条 */}
        <div className={style.progressContainer}>
          <div className={style.progressStep}>
            <div className={style.stepCircle}>1</div>
            <div className={style.stepLine}></div>
            <div className={style.stepCircle}>2</div>
            <div className={style.stepLine}></div>
            <div className={`${style.stepCircle} ${style.active}`}>3</div>
          </div>
          <div className={style.stepLabels}>
            <span className={style.stepLabel}>基本信息</span>
            <span className={style.stepLabel}>邮寄方式</span>
            <span className={`${style.stepLabel} ${style.active}`}>完成申请</span>
          </div>
        </div>

        {/* 成功内容区域 */}
        <div className={style.successContent}>
          <div className={style.successIcon}>
            <CheckCircleFill style={{fontSize: '80px', color: '#17a2b8'}} />
          </div>
          
          <div className={style.successTitle}>
            申请提交成功
          </div>
          
          <div className={style.successDescription}>
            您的申请已完成提交,请耐心等待医院审核,审核完成后将短信通知
          </div>
          
          {/* 用户信息确认区域 */}
          <div className={style.userInfoConfirm}>
            <div className={style.userInfoTitle}>申请信息确认</div>
            <div className={style.userInfoItem}>
              <span className={style.userInfoLabel}>申请人：</span>
              <span className={style.userInfoValue}>{userInfo.name}</span>
            </div>
            <div className={style.userInfoItem}>
              <span className={style.userInfoLabel}>联系电话：</span>
              <span className={style.userInfoValue}>{userInfo.phone}</span>
            </div>
            <div className={style.userInfoItem}>
              <span className={style.userInfoLabel}>邮寄地址：</span>
              <span className={style.userInfoValue}>{userInfo.address}</span>
            </div>
          </div>
        </div>
      </div>

      {/* 底部按钮 */}
      <div className={style.footerSection}>
        <Button className={style.viewOrderButton} onClick={()=>handleViewOrder(userInfo)}>
          查看订单
        </Button>
      </div>
    </div>
  )
}

export default Index
